<template>
  <el-card class="app-container">
    <c-u-r-d-table :option="option" ref="table"/>
    <el-dialog
      :visible.sync="importDialogShowed"
      title="批量导入博主记录"
      width="700px"
      :close-on-click-modal="false"
      center
      top="30vh"
    >
      <el-alert type="warning" :closable="false" show-icon style="line-height: 1.6">
        单次最多可导入的数量最多5000条。若数量较多，可拆分文件后上传
      </el-alert>
      <div slot="footer" class="flex">
        <div class="flex-con" style="text-align: left;font-size: 14px">
          <a href="/template/博主记录导入模板.xlsx" target="_blank">
            下载导入模板
          </a>
        </div>
        <file-uploader
          title="上传导入文件"
          icon=""
          size="mini"
          type="primary"
          action="/api/mct/styler-blogger/import"
          @success="handleImportSuccess"
        />
        <div class="flex-con"></div>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="removeCondShowed"
      title="批量清理"
      width="500px"
      :close-on-click-modal="false"
      center
      top="30vh"
    >
      <el-form ref="form" :model="removeCondForm" :rules="removeCondRule" label-width="80px">
        <el-form-item prop="operationDate" label="日期">
          <el-date-picker
            v-model="removeCondForm.operationDate"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            size="mini"
            end-placeholder="结束日期"
            align="right"
            value-format="yyyy-MM-dd"
            format="yyyy-MM-dd"
            :picker-options="{
              ...dateRangePickerOptions,
              disabledDate: (time) => {
                return time.getTime() > Date.now()
              }
            }"
          ></el-date-picker>

        </el-form-item>
        <el-form-item prop="storeId" label="店铺">
          <el-select size="mini" placeholder="店铺" v-model="removeCondForm.storeId">
            <el-option v-for="i in storeList" :key="i.value" :value="i.value" :label="i.label"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="removeCondShowed = false">取消</el-button>
        <el-button size="mini" type="primary" :loading="isRemovingCond" @click="handleRemoveCond">确定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>

import ColumnType from '@/framework/constant/ColumnType'
import { stylerBloggerApi } from '@/feature/mct/infra/api/stylerBloggerApi'
import CURDTable from '@/framework/components/table/CURDTable'
import { dateRangePickerOptions } from '@/framework/constant/DatePickerOptions'
import { adminApi } from '@/feature/mgr/infra/api/adminApi'
import AdminTypeEnum from '@/feature/mgr/infra/constants/AdminTypeEnum'
import { storeOperationApi } from '@/feature/mct/infra/api/storeOperationApi'
import FileUploader from '@/framework/components/FileUploader'
import { storeApi } from '@/feature/mct/infra/api/storeApi'
import DateUtil from '@/framework/infra/util/DateUtil'
import DateType from '@/framework/constant/DateType'
import { dicApi } from '@/feature/sys/infra/api/dicApi'
import SysDicTypeEnum from '@/feature/sys/infra/constants/SysDicTypeEnum'

export default {
  components: { FileUploader, CURDTable },
  data() {
    return {
      storeList: [],
      importDialogShowed: false,
      removeCondShowed: false,
      dateRangePickerOptions,
      isRemovingCond: false,
      removeCondForm: {
        newDate: [],
        storeId: '',
        bloggerName: ''
      },
      removeCondRule: {
        // operationDate: [
        //   {
        //     required: true,
        //     message: '请选择日期',
        //     trigger: 'blur'
        //   }
        // ]
      },
      option: {
        requestApi: stylerBloggerApi,
        showSelection: true,
        dialogWidth: '600px',
        columns: [
          {
            label: '店铺',
            required: true,
            width: 150,
            searchCached: true,
            prop: 'storeId',
            span: 24,
            searchable: true,
            sortable: 'custom',
            type: ColumnType.SELECT,
            options: storeApi.options()
          },
          {
            label: '上新日期',
            span: 24,
            required: true,
            type: ColumnType.DATE,
            prop: 'newDate',
            width: 150,
            defaultValue: DateUtil.currentDate(),
            searchOption: {
              options: {
                type: DateType.DATERANGE
              }
            },
            searchable: true
          },
          {
            label: '选款师',
            span: 24,
            prop: 'stylerId',
            searchable: true,
            type: ColumnType.SELECT,
            // hiddenInForm: true,
            width: 100,
            // required: true,
            options: adminApi.listAllOfType(AdminTypeEnum.STYLE_SELECTOR.id).then(data => {
              const posIdx = data.findIndex(el => el.label.includes('***'))
              if (posIdx > -1) {
                const prefix = data[posIdx]
                data.splice(posIdx, 1)
                data.unshift(prefix)
              }
              return data
            })
          },
          {
            label: '博主ID',
            width: 150,
            span: 24,
            required: true,
            prop: 'bloggerNo',
            searchable: true
          }, {
            label: '博主姓名',
            width: 150,
            span: 24,
            required: true,
            prop: 'bloggerName',
            searchable: true
          },

          {
            label: '渠道',
            width: 'auto',
            span: 24,
            searchable: true,
            type: ColumnType.SELECT,
            options: dicApi.allOptions(SysDicTypeEnum.CHANNEL.id),
            prop: 'channel'
          },
          {
            label: '创建时间',
            type: ColumnType.DATETIME,
            hiddenInForm: true,
            prop: 'gmtCreate'
          },
          {
            label: '修改时间',
            type: ColumnType.DATETIME,
            hiddenInForm: true,
            prop: 'gmtModified'
          }
        ]
      }
    }
  },
  created() {
    storeApi.options().then(data => {
      this.storeList = data
    })
  },
  methods: {
    handleClearAll() {
      this.removeCondForm.operationDate = []
      this.removeCondForm.storeId = ''
      this.removeCondShowed = true
    },
    handleImportSuccess() {
      this.importDialogShowed = false
      this.$refs.table.reloadTable()
    },
    handleImport() {
      this.importDialogShowed = true
    },
    handleRemoveCond() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.isRemovingCond = true
          stylerBloggerApi.removeByCondition(this.removeCondForm).then(() => {
            this.removeCondShowed = false
            this.isRemovingCond = false
            this.$refs.table.reloadTable()
          }).catch(() => {
            this.isRemovingCond = false
          })
        }
      })
    }
  }
}
</script>

